<template>
    <div>
        <el-button icon="el-icon-back" type="primary" size="mini" @click="$router.go(-1)">返回</el-button>
        <div class="topbar text-center mt20 mb30">
            编辑课程教案
        </div>
        <editor v-model="html"></editor>
        <div class="text-center pt20">
            <el-button icon="el-icon-back" size="default" @click="goBack">取消</el-button>
            <el-button type="primary" size="default" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>

<script>
    import TinymceEditor from '@/components/Tinymce'
    import { updateIntro } from '@/api'
    export default {
        components: {
            'editor': TinymceEditor
        },
        data() {
            return {
                courseId: this.$route.params.id,
                html: window.sessionStorage.courseIntro || ''
            };
        },
        watch:{
            'html':function(v){
                console.log('listen:',v)
            }
        },
        created(){

        },
        methods: {
            goBack() {
                this.$router.push('/course/list')
            },
            onSubmit() {
                updateIntro({
                    groupContent: this.html,
                    id: this.courseId
                }).then( res => {
                    this.$message.success('保存成功')
                    setTimeout(function(){
                        this.$router.push('/course/list')
                    }.bind(this), 2000);
                })
            },
        }
    };
</script>

 <style lang="scss" scoped>
        .topbar {
            background: #f2f2f2;
            line-height: 30px;
        }
 </style>